<template>
    <el-row :style="{'padding-top':slide_h*0.2+'px'}" id="loginView">
      <el-col   span="8" offset="8">
        <el-card >
          <div slot="header" class="title18 bold">
            新用户注册
            <router-link to="/login">
              <span class="pull-right">有账号?现在去登陆</span>
            </router-link>
          </div>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
            <el-form-item prop="userName">
              <el-input @keyup.enter.native="submitForm('ruleForm')"
                        placeholder="请填写手机号"
                        type="text"
                        clearable
                        minlength="6"
                        maxlength="20"
                        v-model="ruleForm.userName"
                        autocomplete="on">
                <template slot="prepend">账&nbsp;&nbsp;&nbsp;号</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input @keyup.enter.native="submitForm('ruleForm')"
                        placeholder="请输入密码"
                        type="password"
                        minlength="6"
                        maxlength="20"
                        v-model="ruleForm.password" autocomplete="on" clearable>
                <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
              </el-input>
            </el-form-item>
            <!--<el-form-item prop="inviteCode">-->
              <!--<el-input @keyup.enter.native="submitForm('ruleForm')"-->
                        <!--placeholder="请输入注册邀请码"-->
                        <!--type="text"-->
                        <!--v-model="ruleForm.inviteCode"-->
                        <!--autocomplete="on"-->
                        <!--clearable>-->
                <!--<template slot="prepend">邀请码</template>-->
              <!--</el-input>-->
            <!--</el-form-item>-->
            <el-form-item prop="nickName">
              <el-input @keyup.enter.native="submitForm('ruleForm')" placeholder="昵称必填" type="text"
                        v-model="ruleForm.nickName" autocomplete="on" clearable>
                <template slot="prepend">昵&nbsp;&nbsp;&nbsp;称</template>
              </el-input>
            </el-form-item>
            <el-form-item id="loginrand" prop="rand">
              <el-input @keyup.enter.native="submitForm('ruleForm')" placeholder="请输入验证码" type="text"
                        v-model="ruleForm.rand" autocomplete="on" clearable>
                <template slot="prepend">验证码</template>
                <template slot="append" style="padding:0;">
                  <el-tooltip effect="dark" content="点击刷新" placement="top">
                    <img class="captcha" @click="changeCode(this)" :src="captcheurl"/>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item style="text-align:center">
              <el-button type="primary"  style="min-width:50%" @click="submitForm('ruleForm')">注&nbsp;&nbsp;&nbsp;册
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
</template>
<script type="es6">
  export default {
    inject:["changeActive"],
    data() {
      return {
        slide_h:(window.document.body.offsetHeight),
        captcheurl: '',
        ruleForm: {
          userName: '',
          password: '',
          rand: '',
          inviteCode:'',
          nickName:''
        },
        rules: {
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          userName: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          rand: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }],
          inviteCode:[{
            required: true,
            message: '请输入邀请码',
            trigger: 'blur'
          }]
        },
      }
    },
    methods: {
      initInviteCodeRequired(){
        if(this.$store.getters.getConfig().registerInviteLocked!="0"){
          delete this.rules["inviteCode"];
        };
      },
      submitForm() {
        if(this.ruleForm.userName==''){
          this.proUtil.msgWaring("账号不能为空");
          return;
        }
        if(!this.proUtil.validFromat.ismobile(this.ruleForm.userName)){
          this.proUtil.msgWaring("账号格式不正确")
          return;
        }
        if(this.ruleForm.password==''){
          this.proUtil.msgWaring("密码不能为空");
          return;
        }
        if(this.ruleForm.nickName==''){
          this.proUtil.msgWaring("昵称不能为空");
          return;
        }
        var m = {
          userName: this.ruleForm.userName,
          password: this.proUtil.md5(this.proUtil.md5(this.ruleForm.password)),
          rand: this.ruleForm.rand,
          inviteCode:this.ruleForm.inviteCode,
          nickName:this.ruleForm.nickName
        };
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.sign,lock:1,text:"正在注册...",background:"rgba(0,0,0,0.6)"});
        this.proAPI.postJson(this.proAPI.URLS.sign, m).then((res) => {
          this.proUtil.msgSuccess(res.message);
          this.$router.replace("/login");
        }).catch(()=>{
        })
      },
      changeCode() {
        this.captcheurl = process.env.BASE_API + this.proAPI.URLS.getLoginCaptcha + "?t=" + new Date().getTime()
      },
      setDialoginfo(data){
        this.ruleForm.inviteCode=data.inviteCode
      },
    },
    mounted() {
      this.$nextTick(()=>{
        this.initInviteCodeRequired();
        this.changeCode();
        this.changeActive(2);
      })
    },
    beforeRouteEnter(to,from,next){
      if(to.query.invitCode!==null){
        next(vm =>vm.setDialoginfo(to.query));
      }else{
        next()
      }
    }
  }
</script>
<style scoped lang="scss">
  #loginView{
    /deep/ .el-input-group__append{
      background-color: #409EFF;
      border-color:#409EFF;
      color:#ffffff;
      padding: 0;
      border: 0;
    }
    /deep/ .el-input-group__prepend{
      background-color: #409EFF;
      border-color:#409EFF;
      color:#ffffff;
    }
    .captcha {
      vertical-align: middle;
      min-width: 100px;
      background-color: rgba(0, 0, 0, 0.5)
    }
  }
</style>
